{% extends "../base_adminlte.html" %}

{% block content %}
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
    <div class="content-header">
    </div>

  <section class="content">
      <form  action="{% url 'SchedulerJobAdd' %}" method="post">
        <table style="border-collapse:separate; border-spacing: 0px 10px;
            margin-left: 200px;margin-top: 30px;align-content: center;">
            <tr>
                <td>任务类型</td>
                  <td>
                        <select id='jobtype' name="jobtype" class="form-control"  >
                              <option value="" >请选择</option>
                                 {% for i in schedulertype %}
                                      <option value="{{ i }}">
                                          {{  i }}
                                      </option>
                                  {% endfor %}
                         </select>
                    </td>
                <td>*必填项</td>
            </tr>
            <tr>
                <td>任务名称</td>
                <td><input type="text" name="jobname" value="{{ obj.JobName }}" >
                </td>
                <td>*必填项</td>
            </tr>
            <tr>
                <td>有效时间</td>
                <td width="300px">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text">
                        <i class="far fa-calendar-alt"></i>
                      </span>
                    </div>
                    <input type="text" class="form-control float-right" id="reservation" name="reservation">
                  </div>
                </td>
                <td>*必填项</td>
            </tr>
            <tr>
                <td>执行方案</td>
                  <td>
                        <select id='plan' name="plan" class="form-control"  >
                          <option value="1">执行一次</option>
                          <option value="2">间隔执行</option>
                          <option value="3">cron执行</option>
                         </select>
                    </td>
                <td>*必填项</td>
            </tr>
            <tr id="plan1">
                <td>执行时间</td>
                  <td>
                    <div class="input-group date" id="reservationdatetime" data-target-input="nearest">
                        <input type="text" id="plantime" name="plantime" class="form-control datetimepicker-input" data-target="#reservationdatetime"/>
                        <div class="input-group-append" data-target="#reservationdatetime" data-toggle="datetimepicker">
                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                        </div>
                    </div>
                    </td>
                <td>*必填项</td>
            </tr>
            <tr id="plan2">
                <td>执行间隔</td>
                  <td>
                       <input type="text" name="intervals" value="{{ obj.intervals }}" placeholder="Interger"> 秒
                    </td>
                <td>*必填项</td>
            </tr>
            <tr id="plan3">
                <td>Cron时间</td>
                  <td>
                       <input type="text" name="crontime" value="{{ obj.crontime }}" placeholder="* * * * *">
                    </td>
                <td>*必填项</td>
            </tr>
            <tr>
                <td>任务参数</td>
                <td>
                    <textarea style="width: 100%;margin-bottom: 3%" type="text" class="form-control" id="jobargs" name="jobargs" rows=6 value="{{ obj.JobArgs }}" placeholder="arg1,arg2"></textarea>
                </td>
            </tr>
            <tr>
                <td>备注</td>
                  <td>
                       <input type="text" name="remark" value="{{ obj.Remark }}" placeholder="remark">
                    </td>
            </tr>
            <tr>
                <td></td>
                <td ><input type="submit" value="提交" >
               <button style="margin-left: 10%" onclick="location.href='/myscheduler/schedulerjoblist'" type="button" value="取消" >取消</button></td>
           </tr>
        </table>
    </form>
  </section>
</div>
{% endblock %}
{% block scriptcontent %}
<!-- date-range-picker -->
<script src="../../plugins/daterangepicker/daterangepicker.js"></script>
<script>
  $(function () {
        //Date range picker
        $('#reservation').daterangepicker({showDropdowns: true,
            minYear: 2020,
            maxYear: parseInt(moment().format('YYYY'),10) + 1})
        //Date and time picker
        $('#reservationdatetime').datetimepicker({ icons: { time: 'far fa-clock' } });
        setplan();

          //根据选中系统跳转页面
      $("#plan").change(function () {
          setplan()
      });
      function setplan(){
        var jobplan = $('#plan').val()
        if (jobplan == 1){
            $('#plan1').show();
            $('#plan2').hide();
            $('#plan3').hide();
        } else if(jobplan == 2){
            $('#plan1').hide();
            $('#plan2').show();
            $('#plan3').hide();
        } else {
            $('#plan1').hide();
            $('#plan2').hide();
            $('#plan3').show();
        }
      }
    })
</script>
{% endblock %}
